<template>
  <div class="container">
    <card title="甲方推荐">
      <div class="search-head">
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker
            v-model="sDate"
            type="date"
            :clearable="false"
            :picker-options="pickerOptions"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div class="asm-table">
        <div class="asm-tr">
          <div class="asm-th"></div>
          <div class="asm-th" v-for="n in 10"><strong>第{{n}}位</strong></div>
        </div>
        <div class="asm-tr" v-if="isLoading">
          <loading></loading>
        </div>
        <div class="asm-tr asm-no-data" v-else-if="Object.keys(list).length < 1"></div>
        <div class="asm-tr" v-for="(item, key) in list" v-else>
          <div class="asm-td"><strong>{{key.split(' ')[1]}}</strong></div>
          <div class="asm-td" v-for="it in item.slice(0, 10)" @mousemove="hoverItem(it.name)" @mouseout="hoverItem('')" :class="{'is-active': hoverRank === it.name}">
            {{it.name}}
          </div>
          <template v-if="item.length < 10">
            <div class="asm-td"  v-for="i in (10-item.length)">
              ---
            </div>
          </template>
        </div>
      </div>
    </card>
  </div>
</template>

<script>
export default {
  name: 'recommend',
  computed: {
    sDate: {
      get () {
        return this.date
      },
      set (val) {
        this.date = this.$dateFormat('yyyy-MM-dd', new Date(val))
        this.getData()
      }
    }
  },
  data () {
    let date = this.$dateFormat('yyyy-MM-dd', new Date())
    return {
      date,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() >= Date.now()
        }
      },
      hoverRank: '',
      isLoading: false,
      list: {}
    }
  },
  methods: {
    getData () {
      this.isLoading = true
      let param = {
        date: this.date
      }
      this.$api.get('statistics/competitor_product', param).then(req => {
        this.isLoading = false
        this.list = req
      })
    },
    hoverItem (it) {
      this.hoverRank = it
    }
  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/scss/table.scss';
.asm-td.is-active{
  color: $active-color;
  font-weight: bold;
  cursor: default;
}
.search-head{
  display: flex;
  padding: 10px 20px;
}
</style>

